<template>
  <div>
    <div class="header-btn">
      <div>问卷统计</div>
      <div>
        <el-button type="info" plain @click="goBack">返回</el-button>
      </div>
    </div>
    <div class="wrap g-card">
      <div class="title-header">填写信息</div>
      <el-form ref="form" :model="form" label-width="120px" label-position="left">
        <el-form-item label="标题">{{ form.title }}</el-form-item>
        <el-form-item label="创建人">{{ form.createBy }}</el-form-item>
        <el-form-item label="创建时间">{{ form.createTime }}</el-form-item>
        <el-form-item label="发送次数">{{ form.sendCount }}</el-form-item>
        <el-form-item label="提交人数">{{ form.writeCount }}</el-form-item>
        <el-form-item label="问卷说明">{{ form.description }}</el-form-item>
        <el-form-item>
          <template slot="label">
            结果分析
            <el-tooltip class="item" content="仅显示单选框、下拉框、多选框类型的统计结果" effect="light" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </template>
          <el-table :data="tableData" style="width: 600px;">
            <el-table-column type="index" width="50" label="序号" align="center"></el-table-column>
            <el-table-column prop="scrmTableQuestion.title" label="字段标题" width="100" align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="scrmTableQuestion.mode" label="类型" width="100" align="center">
            </el-table-column>
            <el-table-column prop="scrmTableQuestion.isFill" label="必填" width="50" align="center">
              <template slot-scope="scope">
                {{ scope.row ? '是' : '否' }}
              </template>
            </el-table-column>
            <el-table-column prop="scrmTableValueRateDtoList" label="统计结果" align="center">
              <template slot-scope="scope">
                <div v-for="(item, index) in scope.row.scrmTableValueRateDtoList" :key="index" class="percentage">
                  <span style="width: 80px">{{ item.answer }}</span>
                  <el-progress :percentage="item.percentage"></el-progress>
                </div>
                <div v-if="scope.row.scrmTableValueRateDtoList.length == 0">
                  暂无数据
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { rateCalculation } from '@/api/article/group'

export default {
  data() {
    return {
      scrmTableDetailId: this.$route.query.id,
      form: {
        name: 'dsfadsf'
      },
      tableData: [],
      modeList: [
        { dictValue: '0', dictLabel: '单选框' },
        { dictValue: '1', dictLabel: '多选框' },
        { dictValue: '2', dictLabel: '下拉框' },
        { dictValue: '3', dictLabel: '单行填空' },
        { dictValue: '4', dictLabel: '多行填空' }
      ]
    }
  },
  mounted() {
    this.getInfo()
  },
  methods: {
    goBack() {
      this.$router.push({
        name: 'FormManage', query: { is_person: this.$route.query.is_person }
      })
    },
    getInfo() {
      const params = {
        scrmTableDetailId: this.scrmTableDetailId
      }
      rateCalculation(params).then((res) => {
        if (res.code == 200) {
          this.form = res.data || []
          this.tableData = res.data.scrmTableQuestionAnsweringDtoList || []

          console.log(newTableData);
          this.tableData.forEach(item => {
            item.scrmTableQuestion.mode = this.selectDictLabel(this.modeList, item.scrmTableQuestion.mode)
            item.scrmTableValueRateDtoList.forEach((element) => {
              if (element.rate.indexOf('％') != -1) {
                element['percentage'] = Number(element.rate.slice(0, element.rate.length - 1))
              }

            })
          })
          var newTableData = []

          this.tableData.forEach((item, index) => {

            if (!['单行填空', "多行填空"].includes(item.scrmTableQuestion.mode)) {
              newTableData.push(item)
            }
          })
          this.tableData = newTableData
        }
      }).catch(() => {
        console.log('error')
      })
    },
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/base.scss';

.header-btn {
  @include headerBtn;
}

.wrap {
  @include titleWrap;
}

.percentage {
  display: flex;
  align-items: center;

  .el-progress {
    flex: 1;
  }
}

::v-deep .showRow {
  display: none;
}
</style>
